<template>
	<view class="test-page">
		<view class="header">
			<text class="title">商品流水页面测试</text>
		</view>
		
		<view class="content">
			<view class="test-item" @click="goToProductFlow">
				<text class="test-text">跳转到商品流水页面</text>
				<u-icon name="arrow-right" size="16" color="#999"></u-icon>
			</view>

			<view class="test-item" @click="testAPI">
				<text class="test-text">测试API接口</text>
				<u-icon name="arrow-right" size="16" color="#999"></u-icon>
			</view>

			<view class="info-section">
				<text class="info-title">修复内容：</text>
				<text class="info-text">1. 日期筛选区域和表格头部固定在顶部</text>
				<text class="info-text">2. 日期选择器兼容uView 1.x</text>
				<text class="info-text">3. 表头高度保持一致</text>
			</view>
			
			<view class="result-section" v-if="apiResult">
				<text class="result-title">API测试结果：</text>
				<text class="result-text">{{ apiResult }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getMockProductFlowList } from '@/pagesData/api/productFlow.js'

export default {
	name: 'ProductFlowTest',
	data() {
		return {
			apiResult: ''
		}
	},
	
	methods: {
		// 跳转到商品流水页面
		goToProductFlow() {
			uni.navigateTo({
				url: '/pagesData/pages/product-flow/index'
			})
		},
		
		// 测试API接口
		async testAPI() {
			try {
				uni.showLoading({
					title: '测试中...'
				})
				
				const response = await getMockProductFlowList({
					page: 1,
					pageSize: 5
				})
				
				this.apiResult = `成功获取 ${response.data.list.length} 条数据`
				
				uni.hideLoading()
				uni.showToast({
					title: 'API测试成功',
					icon: 'success'
				})
			} catch (error) {
				uni.hideLoading()
				this.apiResult = `API测试失败: ${error.message}`
				uni.showToast({
					title: 'API测试失败',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.test-page {
	padding: 20px;
	background-color: #f5f6fa;
	min-height: 100vh;
}

.header {
	text-align: center;
	margin-bottom: 30px;
	
	.title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}
}

.content {
	.test-item {
		background-color: #fff;
		padding: 15px 20px;
		margin-bottom: 10px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.test-text {
			font-size: 16px;
			color: #333;
		}
	}
	
	.result-section {
		background-color: #fff;
		padding: 15px 20px;
		margin-top: 20px;
		border-radius: 8px;

		.result-title {
			font-size: 14px;
			font-weight: 600;
			color: #333;
			display: block;
			margin-bottom: 10px;
		}

		.result-text {
			font-size: 14px;
			color: #666;
		}
	}

	.info-section {
		background-color: #f0f9ff;
		padding: 15px 20px;
		margin-top: 20px;
		border-radius: 8px;
		border-left: 4px solid #007aff;

		.info-title {
			font-size: 14px;
			font-weight: 600;
			color: #007aff;
			display: block;
			margin-bottom: 10px;
		}

		.info-text {
			font-size: 13px;
			color: #666;
			display: block;
			margin-bottom: 5px;
			padding-left: 10px;
		}
	}
}
</style>
